<template>
	<view :class="[BackGround]" :style="[{'font-weight':Style,'font-family':Font,height:100 + '%',minHeight:height + 'px'}]">
		<cu-custom bgColor="bg-gradual-blue" isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">跟单动态</view>
		</cu-custom>
		<view class="nav Allsearch">
			<view class="flex bg-white">
				<view @tap="tabSelect(0)" :class="['cu-item flex-sub text-center padding-sm margin-xs radius bor',0==TabCur?'text-blue cur':'']">主信息</view>
				<view @tap="tabSelect2(1)" :class="['cu-item flex-sub text-center padding-sm margin-xs radius',1==TabCur?'text-blue cur':'']">跟踪历史</view>
			</view>
		</view>
		<view v-if="page">
			<view :class="['margin-xs radius shadow shadow-lg bg-white',BackGroundBox]" style="margin-top: 100rpx;">
				<form @submit="formSubmit" @reset="formReset">
					<view class="cu-form-group">
						<view class="title">完成时间</view>
						<input type="text" disabled :value="date1" />
					</view>
					<view class="cu-form-group">
						<view class="title">跟踪数量</view>
						<input type="text" disabled value="500" />
					</view>
					<view class="cu-form-group">
						<view class="title">位置</view>
						<input type="text" disabled :value="LMAKEOPID" name="LMAKEOPID" />
					</view>
					<view class="cu-form-group">
						<view class="title">定型时间</view>
						<input disabled name="LMAKEDATE" type="text" :value="date1" />
					</view>
					<view class="cu-form-group">
						<view class="title">备注</view>
						<input type="text" name="LREMACK" disabled />
					</view>
					<button-father :Position="'tb-fa-fixed'">
						<button class="cu-btn bg-gradual-red  lg shadow tb-flex cu-btn-new">删除</button>
						<button class="cu-btn bg-gradual-blue  lg shadow tb-flex cu-btn-new" form-type="submit">确认</button>
					</button-father>
				</form>
			</view>
			<view :class="['margin-xs radius shadow shadow-lg bg-white',BackGroundBox]">
				<view class="cu-bar bg-white margin-top-xs">
					<view class="action">
						图片上传
					</view>
					<view class="action">
						{{imgList.length}}/5
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
							<image :src="imgList[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseImage" v-if="imgList.length<5">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-bar bg-cyan solid-bottom margin-xs radius shadow shadow-lg " style="z-index: 9; display: flex;justify-content: space-between;background-color: rgb(223, 240, 253);">
				<view style="margin-left: 32rpx;font-size: 36rpx;color: rgb(127, 184, 178);"><text>新增跟单动态</text></view>
				<image @tap="jumpadddetail" style="width: 100rpx;height: 100rpx;padding-right: 20rpx;" src="/static/images/add.png"
				 mode="aspectFit"></image>
			</view>
			<view :class="[viewname,'cu-bar search']">
				<view class="search-form">
					<text style="width: 20rpx;"></text>
					<input @input="input" v-model="text" placeholder="请输入内容" :adjust-position="false" type="text"
					 confirm-type="search" />
					<view @tap="clean" v-show="text" class="lg text-gray cuIcon-roundclosefill"></view>
				</view>
				<view class="" @tap="jumpadddetail">
					<button class="cu-btn bg-Lightblue shadow-blur">确认</button>
				</view>
			</view>
			<!-- <view >
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input type="text" placeholder="请输入内容" v-model="text" confirm-type="search"></input>
				</view>
				<view class="action">
					<button class="cu-btn bg-gradual-green shadow-blur round" @tap="jumpadddetail">确认</button>
				</view>
			</view> -->
			<view :class="['margin-xs radius shadow shadow-lg bg-white']" v-if="isShow" style="margin-bottom: 100rpx;">
				<view class="cu-list menu-avatar">
					<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in list" :key="index"
					 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" @tap="jumpdetail" :data-target="'move-box-' + index">
						<view class="cu-avatar round lg" style="background-color: #fff;">
							<image src="/static/images/Distributionsettings.png" mode="aspectFit"></image>
						</view>
						<view class="content">
							<view class="text-grey">职位{{item.LPOST}}</view>
							<view class="text-gray text-sm">联系人:{{item.LLCONTACT}} 手机:{{item.LPHONE}}</view>
						</view>
						<view class="move">
							<view class="bg-red" @tap.stop="shanchu(index)">删除</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<view :class="['margin-xs radius shadow shadow-lg bg-white',BackGroundBox]" style="margin-top: 100rpx;">
				<view class="grid margin-bottom col-1 padding-xs">
					<view class="padding-xs">跟踪数量 ：20055</view>
					<view class="padding-xs">跟踪位置 ：安徽柠徽信息工程</view>
					<view class="padding-xs">跟踪人 ：20055</view>
					<view class="padding-xs" style="text-align: right;">2020-04-15</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import ButtonFather from '@/colorui/components/ButtonFather.vue'
	import {
		mapGetters,
		mapMutations
	} from "vuex";
	import {
		getselectReferList,
		getselectRefer
	} from '@/service/selectList.js'
	import {
		postupdateList
	} from "@/service/updateList.js"
	export default {
		data() {
			return {
				isShow: true,
				TabCur: 0,
				page: true,
				viewname: 'transform',
				height: this.screenHeight,
				modalName: null,
				listTouchStart: 0,
				text: '',
				// LMAKEOPID: global.userinfo.lusername,
				LMAKEOPID: '张远涛',
				date1: global.dateright,
				list: [],
				imgList: [],
			}
		},
		computed: {
			...mapGetters(['Style', 'Font', 'BackGround', 'BackGroundBox'])
		},
		components: {
			ButtonFather
		},
		destroyed() {
			this.delPurchaselist([])
			this.setplanList([])
		},
		onLoad() {
			// this.selectReferList()
		},
		onShow() {
			if (this.getPurchaselist.length != 0) {
				this.list = this.getPurchaselist

			}
		},
		methods: {
			...mapMutations(['delPurchaselist', 'dellistdetail', 'setplanList']),

			tabSelect(e) {
				this.TabCur = e
				this.page = true
			},
			tabSelect2(e) {
				this.TabCur = e
				this.page = false
			},
			ChooseImage() {
			    uni.chooseImage({
			        count: 4, //默认9
			        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			        sourceType: ['album','camera'], //从相册选择
			        success: (res) => {
			            if (this.imgList.length != 0) {
			                this.imgList = this.imgList.concat(res.tempFilePaths)
			            } else {
			                this.imgList = res.tempFilePaths
			            }
			        }
			    });
			},
			ViewImage(e) {
			    uni.previewImage({
			        urls: this.imgList,
			        current: e.currentTarget.dataset.url
			    });
			},
			DelImg(e) {
			    uni.showModal({
			        title: '提示',
			        content: '确定要删除这张照片吗？',
			        cancelText: '取消',
			        confirmText: '确认',
			        success: res => {
			            if (res.confirm) {
			                this.imgList.splice(e.currentTarget.dataset.index, 1)
			            }
			        }
			    })
			},
			formSubmit(e) {
				var rule = [];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = this.$graceChecker.check(formData, rule);
				if (!checkRes) {
					uni.showToast({
						title: this.$graceChecker.error,
						icon: "none"
					});
				} else {
					e.detail.value.LTICKETNO = 'auto'
					console.log(e.detail.value);
					let bb = {
						table: [e.detail.value],
						dts: this.getPurchaselist
					}
					// postupdateList(JSON.stringify(bb),'www.ahlinghui.com:8443','400101','').then(res => {
					// 	console.log(res);
					// })
					// uni.navigateBack({
					// 	delta: 1
					// })
				}
			},
			//删除从表
			shanchu(index) {
				this.dellistdetail(index)
			},
			//跳转详情
			jumpdetail() {
				uni.navigateTo({
					url: './lubricationadd/lubricationset'
				})
			},
			//添加
			jumpadddetail() {
				console.log(this.text);
				this.viewname = this.viewname == 'transform' ? 'transformclose' : 'transform'
				this.text = ''
			},
			//跳转客户页面
			jumpkehu() {
				uni.navigateTo({
					url: './kehu'
				})
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			}
		}
	}
</script>

<style>
	page {
		background-color: whitesmoke;
	}

	.transform {
		opacity: 0;
		transform: translateY(-100%);
		transition: all 0.3s ease-in-out;
	}

	.transformclose {
		transform: translateY(0%);
		transition: all 0.3s ease-in-out;
	}

	.bor {
		border-right: 2rpx solid #eee;
	}

	.Allsearch {
		position: fixed;
		left: 0rpx;
		right: 0rpx;
		z-index: 1;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, .1)
	}
</style>
